<template>
  <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" v-if="selectedItem">
    <template v-for="(prop, idx) in properties">
      <a-form-model-item v-if="prop.prop === 'type'" label="组件类型" :key="idx">
        <a-select
        :value="selectedItem.type"
        :options="options"
        @change="typeChanged($event, 'type')"/>
      </a-form-model-item>
      <a-form-item
        :key="idx"
        :label="prop.label"
        v-else-if="showCondition(prop) && prop.type !== 'extra'"
      >
        <a-input
          v-if="prop.type === 'input'"
          allowClear
          :value="selectedItem[prop.prop]"
          :title="prop.title || ''"
          @change="valueChanged($event.target.value, prop.prop)"/>
        <a-textarea
          v-if="prop.type === 'textarea'"
          allowClear
          :value="selectedItem[prop.prop]"
          :title="prop.title || ''"
          @change="valueChanged($event.target.value, prop.prop)"/>
        <a-input-number
          v-if="prop.type === 'inputnumber'"
          allowClear
          style="width: 100%"
          :value="selectedItem[prop.prop]"
          :title="prop.title || ''"
          :min="0"
          :formatter="value => `${value}${prop.unit}`"
          :parser="value => value.replace(prop.unit, '')"
          @change="valueChanged($event, prop.prop)"/>
        <a-switch
          v-if="prop.type === 'switch'"
          allowClear
          :checked="selectedItem[prop.prop]"
          :title="prop.title || ''"
           @change="valueChanged($event, prop.prop)" />
        <a-select
          v-if="prop.type === 'select'"
          allowClear
          :value="selectedItem[prop.prop]"
          :title="prop.title || ''"
          :options="prop.options || []"
          @change="valueChanged($event, prop.prop)"/>
      </a-form-item>
      <div v-else :key="idx">
        <div v-if="prop.prop === 'rules'">
          <a-divider>正则校验</a-divider>
          <div>
            <a-button type="link" icon="plus-circle" @click="addRule">添加</a-button>
          </div>
          <template v-for="(rule, idx) in selectedItem.rules">
            <a-form-model-item :key="`pattern${idx}`" label="预置规则">
              <a-radio-group
                :value="rule.ruleType"
                button-style="solid"
                @change="childValueChanged($event.target.value, 'ruleType', rule)"
              >
                <a-radio-button value="default">
                  默认
                </a-radio-button>
                <a-radio-button value="customer">
                  自定义
                </a-radio-button>
              </a-radio-group>
              <a-select
                v-if="rule.ruleType === 'default' || !rule.ruleType"
                :value="rule.pattern"
                @change="ruleValueChanged($event, rule)">
                <a-select-option
                  v-for="(ruleOption, idx) in ruleOptions"
                  :key="idx" :value="ruleOption.pattern">
                  {{ruleOption.label}}
                </a-select-option>
              </a-select>
              <a-input
                v-else
                :value="rule.validatorName"
                @change="ruleValidatorChanged($event.target.value, rule)"
              />
            </a-form-model-item>
            <a-button
              :key="`${idx}_pattern_button`"
              type="link" icon="delete"
              @click="delChild('rules', idx)">
              删除
            </a-button>
            <a-divider
              v-if="selectedItem.rules && (idx !== selectedItem.rules.length - 1)"
              :key="`${idx}_pattern_divider`"></a-divider>
          </template>
        </div>
        <div v-if="prop.prop === 'dataParams'">
          <a-divider>{{prop.label}}</a-divider>
          <div>
            <a-button type="link" icon="plus-circle" @click="addParam('dataParams')">添加</a-button>
          </div>
          <template v-for="(param, idx) in selectedItem.dataParams">
            <a-form-model-item :key="`key${idx}`" label="key">
              <a-input
                :value="param.key"
                @change="childValueChanged($event.target.value, 'key', param)"/>
            </a-form-model-item>
            <a-button
              :key="`${idx}_dataParams_button`"
              type="link" icon="delete"
             @click="delChild('dataParams', idx)">
              删除
            </a-button>
            <a-divider
              v-if="selectedItem.rules && (idx !== selectedItem.rules.length - 1)"
              :key="`${idx}_dataParams_divider`"></a-divider>
          </template>
        </div>
        <div v-if="prop.prop === 'refParams'">
          <a-divider>{{prop.label}}</a-divider>
          <div>
            <a-button type="link" icon="plus-circle" @click="addParam('refParams')">添加</a-button>
          </div>
          <template v-for="(param, idx) in selectedItem.refParams">
            <a-form-model-item :key="`key${idx}`" label="key">
              <a-input
                :value="param.key"
                @change="childValueChanged($event.target.value, 'key', param)"/>
            </a-form-model-item>
            <a-button
              :key="`${idx}_refParams_button`"
              type="link" icon="delete"
             @click="delChild('refParams', idx)">
              删除
            </a-button>
            <a-divider
              v-if="selectedItem.rules && (idx !== selectedItem.rules.length - 1)"
              :key="`${idx}_dataParams_divider`"></a-divider>
          </template>
        </div>
        <div v-if="prop.prop === 'relParams'">
          <a-divider>{{prop.label}}</a-divider>
          <div>
            <a-button type="link" icon="plus-circle" @click="addParam('relParams')">添加</a-button>
          </div>
          <template v-for="(param, idx) in selectedItem.relParams">
            <a-form-model-item :key="`key_relParams_${idx}`" label="key">
              <a-input
                :value="param.key"
                @change="childValueChanged($event.target.value, 'key', param)"/>
            </a-form-model-item>
            <a-button
              :key="`${idx}_relParams_button`"
              type="link" icon="delete"
             @click="delChild('relParams', idx)">
              删除
            </a-button>
            <a-divider
              v-if="selectedItem.rules && (idx !== selectedItem.rules.length - 1)"
              :key="`${idx}_relParams_divider`"></a-divider>
          </template>
        </div>
      </div>
    </template>
  </a-form-model>
</template>

<script>

import _ from 'lodash';

const ruleOptions = [
  {
    label: '手机号验证',
    pattern: '^1[34578]\\d{9}$',
    message: '手机号码格式不正确'
  },
  {
    label: '长度30校验',
    pattern: '^.{1,30}$',
    message: '最长限制30位字符'
  },
  {
    label: '10位数字校验',
    pattern: '^\\d{1,10}$',
    message: '最长限制10位数字'
  },
  {
    label: '17位数字校验',
    pattern: '^\\d{1,17}$',
    message: '最长限制17位数字'
  },
  {
    label: '17位数字,2位小数',
    pattern: '(^[0-9]{1,17}$)|(^[0-9]{1,17}[\\.]{1}[0-9]{1,2}$)',
    message: '最长限制17位数字和2位小数'
  },
  {
    label: 'vin码长度17位',
    pattern: '^.{17}$',
    message: '固定长度17位'
  },
  {
    label: '长度500校验',
    pattern: '^.{1,500}$',
    message: '最长限制500位字符'
  }
];
const ruleMap = _.keyBy(ruleOptions, 'pattern');

export default {
  props: ['properties', 'selectedItem'],
  name: 'optionProperty',
  data() {
    return {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      ruleOptions,
      options: [
        {
          label: '输入框',
          value: 'input'
        },
        {
          label: '输入搜索框',
          value: 'search'
        },
        {
          label: '同步数据框',
          value: 'sync'
        },
        {
          label: '费用计算框',
          value: 'calculate'
        },
        {
          label: '文本框',
          value: 'textarea'
        },
        {
          label: '下拉框',
          value: 'select'
        },
        {
          label: '级连选择',
          value: 'cascader'
        },
        {
          label: '时间选择器',
          value: 'datepicker'
        },
        {
          label: '文件上传',
          value: 'upload'
        },
        {
          label: '搜索框',
          value: 'autoComplete'
        },
        {
          label: '子标题',
          value: 'title'
        }
      ]
    };
  },
  methods: {
    typeChanged(val, prop) {
      this.$emit('typeChanged', val, prop, this.selectedItem);
    },
    valueChanged(val, prop) {
      this.$emit('valueChanged', val, prop, this.selectedItem);
    },
    childValueChanged(val, prop, current) {
      this.$emit('valueChanged', val, prop, current);
    },
    ruleValueChanged(val, current) {
      const { pattern, message } = ruleMap[val];
      this.$emit('ruleChanged', { pattern, message }, current);
    },
    ruleValidatorChanged(val, current) {
      this.$emit('ruleChanged', { validatorName: val }, current);
    },
    addRule() {
      this.addChild('rules', {
        ruleType: 'default',
        pattern: '',
        message: '',
        trigger: 'change',
        validatorName: ''
      });
    },
    addParam(prop) {
      this.addChild(prop, { key: '' });
    },
    addChild(prop, value) {
      this.$emit('addChild', prop, value);
    },
    delChild(prop, idx) {
      this.$emit('delChild', this.selectedItem, prop, idx);
    },
    showCondition(prop) {
      let flag = true;
      if (prop.display) {
        flag = this.selectedItem[prop.display.prop] === undefined
          ? true
          : this.selectedItem[prop.display.prop] === prop.display.value;
      }
      return flag;
    }
  }
};
</script>
